<template scoped>
  <div class="authenticateInfo">
    <div class="ai-title">
      <span class="sign"></span>
      <span>个人信息认证</span>
    </div>
    <div class="ai-content">
      <div class="aic-line">
        <label for="exchange">布勒交易所：</label>
        <input type="text" id="exchange" placeholder="请输入交易所账号">
        <div class="bindAccount jiaoyi" @click="jiaoyi">绑定</div>
      </div>
      <div class="aic-line">
        <label for="currency">*币旺：</label>
        <input type="text" id="currency" placeholder="请输入币旺账号">
      </div>
      <div class="aic-line disCode1">
        <label for="verifyCode1">验证码：</label>
        <input type="text" id="verifyCode1" placeholder="请输入验证码">
        <div class="getCode codeBW" @click="getcodeBW()">获取验证码</div>
        <div class="bindAccount bw" @click="bindBW()">绑定</div>
      </div>
      <!-- <div class="aic-line">
        <label for="RNet">R网：</label>
        <input type="text" id="RNet" placeholder="请输入R网账号">
      </div>
      <div class="aic-line disCode2">
        <label for="verifyCode2">验证码：</label>
        <input type="text" id="verifyCode2" placeholder="请输入验证码">
        <div class="getCode codeRW" @click="getcodeRW()">获取验证码</div>
        <div class="bindAccount rw" @click="bindRW()">绑定</div>
      </div> -->
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name: "authenticateInfo",
  created() {
    this.ifBind();
  },
  data() {
    return {
      jiaoyiId: localStorage.getItem("userID"),
      currency: $.trim($("#currency").val()), //币旺邮箱
      verifyCode1: $.trim($("#verifyCode1").val()), //币旺验证码
      exchange: $.trim($("#exchange").val()), //交易所账号
      RNet: $.trim($("#RNet").text()), //R网账号
      verifyCode2: $.trim($("#verifyCode2").val()) //R网验证码
    };
  },
  methods: {
    //封装个人信息接口  判断是否绑定
    ifBind() {
      u.userInfo({ id: localStorage.getItem("userID") }, data => {
        //判断是否绑定交易所
        if (data.data.exchangeBind == 1) {
          $("#exchange").val(data.data.exchangeAccount);
          $("#exchange").attr("disabled", "disabled");
          $(".jiaoyi").css({ display: "none" });
          $("#exchange").css({ width: "340px" });
        }
        //判断是否绑定BW
        if (data.data.bwBind == 1) {
          $("#currency").val(data.data.bwAccount);
          $("#currency").attr("disabled", "disabled");
          $("#verifyCode1").attr("disabled", "disabled");
          $(".codeBW").css({ display: "none" });
          $(".bw").css({ display: "none" });
          $("#verifyCode1").css({ width: "340px" });
          $(".disCode1").css({ display: "none" });
        }
        //判断是否RW
        // if (data.data.rwBind==1) {
        //   $("#RNet").val(data.data.rwAccount);
        //   $("#RNet").attr("disabled", "disabled");
        //   $("#verifyCode2").attr("disabled", "disabled");
        //   $(".codeRW").css({ display: "none" });
        //   $(".rw").css({ display: "none" });
        //   $("#verifyCode2").css({ width: "340px" });
        //   $('.disCode2').css({'display':'none'})
        // }
      });
    },
    //点击交易所绑定
    jiaoyi() {
      if ($.trim($("#exchange").val()) == "") {
        this.$message.error("交易所账号不能为空");
        return;
      } else {
        u.jiaoyiAccount(
          {
            phone: Number($.trim($("#exchange").val()))
          },
          data => {
            if (data.data == null || !data) {
              this.$message.error("交易所账号不存在");
            } else {
              u.jiaoyiBand(
                {
                  exchangeAccount: $.trim($("#exchange").val()),
                  id: this.jiaoyiId
                },
                data => {
                  if (data.message && data.message == "成功") {
                    this.$message({
                      message: "交易所账号绑定成功！",
                      type: "success"
                    });
                    this.ifBind();
                  } else {
                    this.$message.error("交易所账号绑定失败！");
                  }
                }
              );
            }
          }
        );
      }
    },
    //币旺获取验证码
    getcodeBW() {
      //验证邮箱
      let reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      if (!reg.test($.trim($("#currency").val()))) {
        this.$message.error("请正确填写邮箱！");
        return;
      } else {
        // 倒计时
        let count = 60;
        $(".codeBW")
          .css("pointer-events", "none")
          .text(count + "秒后重新发");
        t.timer = setInterval(function() {
          if (count > 0) {
            count = count - 1;
            $(".codeBW").text(count + "秒后重新发");
          } else {
            $(".codeBW").css("pointer-events", "");
            $(".codeBW").text("获取验证码");
            count = 60;
            clearInterval(timer);
          }
        }, 1000);
        u.BWmail(
          {
            emailAddress: $.trim($("#currency").val())
          },
          data => {
            if (data && data.message == "成功") {
              return;
            } else {
              this.$message({
                type: "error",
                message: data.message
              });
            }
          }
        );
      }
    },
    //绑定币旺
    bindBW() {
      u.BWbind(
        {
          bwAccount: $.trim($("#currency").val()),
          code: $.trim($("#verifyCode1").val()),
          id: this.jiaoyiId
        },
        data => {
          if (data && data.message == "成功") {
            this.$message({
              message: "币旺绑定成功！",
              type: "success"
            });
            this.ifBind();
          } else {
            this.$message({
              type: "error",
              message: data.message
            });
            return;
          }
        }
      );
    },
    //R网验证码
    getcodeRW() {
      //验证邮箱
      let reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      if (!reg.test($.trim($("#RNet").val()))) {
        this.$message.error("请正确填写邮箱！");
        return;
      } else {
        // 倒计时
        let count = 60;
        $(".codeRW")
          .css("pointer-events", "none")
          .text(count + "秒后重新发");
        t.timer = setInterval(function() {
          if (count > 0) {
            count = count - 1;
            $(".codeRW").text(count + "秒后重新发");
          } else {
            $(".codeRW").css("pointer-events", "");
            $(".codeRW").text("获取验证码");
            count = 60;
            clearInterval(timer);
          }
        }, 1000);
        u.RWmail(
          {
            emailAddress: $.trim($("#RNet").val())
          },
          data => {
            if (data && data.message == "成功") {
              return;
            } else {
              this.$message({
                type: "error",
                message: data.message
              });
            }
          }
        );
      }
    },
    //绑定RW
    bindRW() {
      u.RWbind(
        {
          rwAccount: $.trim($("#RNet").val()),
          code: $.trim($("#verifyCode2").val()),
          id: this.jiaoyiId
        },
        data => {
          if (data && data.message == "成功") {
            this.$message({
              message: "R网绑定成功！",
              type: "success"
            });
            this.ifBind();
          } else {
            this.$message({
              type: "error",
              message: data.message
            });
            return;
          }
        }
      );
    }
  }
};
</script>
<style lang="stylus" type='text/stylus' scoped>
.authenticateInfo {
  width: 100%;
  height: 100%;
  background: white;

  .ai-title {
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #282828;
    border-bottom: 1px solid #f4f5f6;

    span {
      vertical-align: middle;
    }

    .sign {
      display: inline-block;
      margin-right: 10px;
      background: #ffb001;
      width: 5px;
      height: 18px;
    }
  }

  .ai-content {
    padding: 34px 30px;
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: auto;

    .aic-line {
      margin-bottom: 35px;
      height: 40px;

      label {
        display: inline-block;
        width: 135px;
        font-size: 14px;
        color: #3d3d3d;
      }

      input {
        padding: 0 14px;
        width: 340px;
        height: 40px;
        font-size: 14px;
        color: #747474;
        outline: none;
        border-radius: 3px;
        border: 1px solid #e6e9ed;

        &:focus {
          border-color: #ffb001;
        }

        &::-webkit-input-placeholder {
          color: #cccccc;
        }

        &:-moz-placeholder {
          color: #cccccc;
        }
      }

      #exchange {
        width: 265px;
      }

      #verifyCode1 {
        width: 155px;
      }

      #verifyCode2 {
        width: 155px;
      }

      .bindAccount {
        display: inline-block;
        width: 68px;
        height: 40px;
        font-size: 14px;
        text-align: center;
        color: white;
        line-height: 40px;
        border-radius: 2px;
        background: #ffb001;
        cursor: pointer;
      }

      .getCode {
        display: inline-block;
        margin-left: 13px;
        width: 91px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #ffb001;
        text-align: center;
        border-radius: 2px;
        border: 1px solid #ffb001;
        cursor: pointer;
      }
    }
  }
}
</style>
